package com.bytecodezz.jc.basicslayouts

import android.content.res.Configuration.UI_MODE_NIGHT_YES
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Share
import androidx.compose.material3.*
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.bytecodezz.jc.basicslayouts.ui.theme.JetpackComposeTheme

class MainActivity : ComponentActivity() {
    private val alignYourBodyData = listOf(
        R.drawable.ab1_inversions to R.string.ab1_inversions,
        R.drawable.ab2_quick_yoga to R.string.ab2_quick_yoga,
        R.drawable.ab3_stretching to R.string.ab3_stretching,
        R.drawable.ab4_tabata to R.string.ab4_tabata,
        R.drawable.ab2_quick_yoga to R.string.ab2_quick_yoga,
        R.drawable.ab5_hiit to R.string.ab5_hiit,
        R.drawable.ab1_inversions to R.string.ab1_inversions,
        R.drawable.ab4_tabata to R.string.ab4_tabata,
        R.drawable.ab6_pre_natal_yoga to R.string.ab6_pre_natal_yoga
    ).map { DrawableStringPair(it.first, it.second) }

    private val favoriteCollectionsData = listOf(
        R.drawable.fc1_short_mantras to R.string.fc1_short_mantras,
        R.drawable.fc2_nature_meditations to R.string.fc2_nature_meditations,
        R.drawable.fc3_stress_and_anxiety to R.string.fc3_stress_and_anxiety,
        R.drawable.fc4_self_massage to R.string.fc4_self_massage,
        R.drawable.fc5_overwhelmed to R.string.fc5_overwhelmed,
        R.drawable.fc2_nature_meditations to R.string.fc2_nature_meditations,
        R.drawable.fc3_stress_and_anxiety to R.string.fc3_stress_and_anxiety,
        R.drawable.fc1_short_mantras to R.string.fc1_short_mantras,
        R.drawable.fc4_self_massage to R.string.fc4_self_massage,
        R.drawable.fc6_nightly_wind_down to R.string.fc6_nightly_wind_down
    ).map { DrawableStringPair(it.first, it.second) }

    private data class DrawableStringPair(
        @DrawableRes val drawable: Int,
        @StringRes val text: Int
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MySootheApp()
                }
            }
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun MySootheApp() {
        Scaffold(bottomBar = { SootheBottomNavigation() }) { padding ->
            HomeScreen(Modifier.padding(padding))
        }
    }

    @Composable
    fun SootheBottomNavigation(modifier: Modifier = Modifier) {
        BottomNavigation(
            backgroundColor = MaterialTheme.colorScheme.background,
            modifier = modifier
        ) {
            BottomNavigationItem(
                icon = {
                    Icon(imageVector = Icons.Default.Share, contentDescription = null)
                }, label = {
                    Text(stringResource(R.string.bottom_navigation_home))
                },
                selected = true,
                onClick = { })
            BottomNavigationItem(
                icon = {
                    Icon(imageVector = Icons.Default.AccountCircle, contentDescription = null)
                }, label = {
                    Text(stringResource(R.string.bottom_navigation_profile))
                },
                selected = false,
                onClick = { })
        }
    }

    @Composable
    fun HomeScreen(modifier: Modifier = Modifier) {
        Column(
            modifier = modifier
                .verticalScroll(rememberScrollState())
                .padding(vertical = 16.dp)
        ) {
            SearchBar(modifier = Modifier.padding(horizontal = 16.dp))
            HomeSection(titleRes = R.string.align_your_body) {
                AlignYourBodyRow()
            }
            HomeSection(titleRes = R.string.favorite_collections) {
                FavoriteCollectionsGrid()
            }
            HomeSection(titleRes = R.string.align_your_body) {
                AlignYourBodyRow()
            }
            HomeSection(titleRes = R.string.favorite_collections) {
                FavoriteCollectionsGrid()
            }
            HomeSection(titleRes = R.string.align_your_body) {
                AlignYourBodyRow()
            }
            HomeSection(titleRes = R.string.favorite_collections) {
                FavoriteCollectionsGrid()
            }
            HomeSection(titleRes = R.string.align_your_body) {
                AlignYourBodyRow()
            }
            HomeSection(titleRes = R.string.favorite_collections) {
                FavoriteCollectionsGrid()
            }
            HomeSection(titleRes = R.string.align_your_body) {
                AlignYourBodyRow()
            }
            HomeSection(titleRes = R.string.favorite_collections) {
                FavoriteCollectionsGrid()
            }
            HomeSection(titleRes = R.string.align_your_body) {
                AlignYourBodyRow()
            }
            HomeSection(titleRes = R.string.favorite_collections) {
                FavoriteCollectionsGrid()
            }
        }
    }

    @Composable
    fun HomeSection(
        @StringRes titleRes: Int,
        modifier: Modifier = Modifier,
        contentUI: @Composable () -> Unit
    ) {
        Column(modifier = modifier) {
            Text(
                text = stringResource(id = titleRes).uppercase(),
                style = MaterialTheme.typography.titleSmall,
                modifier = Modifier
                    .paddingFromBaseline(top = 40.dp, bottom = 8.dp)
                    .padding(horizontal = 16.dp)
            )
            contentUI()
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun SearchBar(modifier: Modifier = Modifier) {
        TextField(
            value = "", onValueChange = {},
            modifier = modifier
                .fillMaxWidth()
                .heightIn(56.dp)
                .wrapContentHeight(),
            leadingIcon = {
                Icon(imageVector = Icons.Default.Search, contentDescription = null)
            },
            colors = TextFieldDefaults.textFieldColors(
                containerColor = MaterialTheme.colorScheme.surface,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent
            ),
            shape = RoundedCornerShape(6.dp),
            placeholder = {
                Text(text = "Search")
            }
        )
    }

    @Composable
    fun AlignYourBodyElement(
        @StringRes titleRes: Int,
        @DrawableRes iconDrawable: Int,
        modifier: Modifier = Modifier
    ) {
        Column(
            modifier = modifier,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                painter = painterResource(id = iconDrawable),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(88.dp)
                    .clip(CircleShape),
            )
            Text(
                text = stringResource(id = titleRes),
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.paddingFromBaseline(top = 24.dp, bottom = 8.dp)
            )
        }
    }

    @Composable
    fun FavoriteCollectionCard(
        @StringRes descRes: Int,
        @DrawableRes contentDrawable: Int,
        modifier: Modifier = Modifier
    ) {
        Surface(shape = ShapeDefaults.Small, modifier = modifier) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.width(192.dp)
            ) {
                Image(
                    contentScale = ContentScale.Crop,
                    painter = painterResource(id = contentDrawable),
                    contentDescription = null,
                    modifier = Modifier.size(56.dp)
                )
                Text(
                    text = stringResource(id = descRes),
                    style = MaterialTheme.typography.bodySmall,
                    modifier = Modifier
                        .padding(horizontal = 16.dp)
                )
            }
        }
    }

    @Composable
    fun AlignYourBodyRow(modifier: Modifier = Modifier) {
        LazyRow(
            modifier = modifier
                .wrapContentHeight()
                .fillMaxWidth(),
            contentPadding = PaddingValues(horizontal = 16.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(alignYourBodyData) { item ->
                AlignYourBodyElement(
                    item.text,
                    item.drawable
                )
            }
        }
    }

    @Composable
    fun FavoriteCollectionsGrid(modifier: Modifier = Modifier) {
        LazyHorizontalGrid(
            rows = GridCells.Fixed(2),
            contentPadding = PaddingValues(horizontal = 16.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            modifier = modifier
                .height(120.dp)
                .fillMaxWidth()
        ) {
            items(favoriteCollectionsData) { item ->
                FavoriteCollectionCard(
                    descRes = item.text,
                    contentDrawable = item.drawable
                )
            }
        }
    }

    @Preview(showBackground = true, uiMode = UI_MODE_NIGHT_YES)
    @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        JetpackComposeTheme {
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.background
            ) {
                MySootheApp()
            }
        }
    }

    @Preview(showBackground = true)
    @Composable
    fun SootheBottomNavigationPreview() {
        JetpackComposeTheme {
            SootheBottomNavigation()
        }
    }

    @Preview(showBackground = true, uiMode = UI_MODE_NIGHT_YES)
    @Preview(showBackground = true)
    @Composable
    fun HomeScreenPreview() {
        JetpackComposeTheme {
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.background
            ) {
                HomeScreen()
            }
        }
    }

    @Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
    @Composable
    fun HomeSectionPreview() {
        JetpackComposeTheme {
            HomeSection(R.string.align_your_body) {
                AlignYourBodyRow()
            }
        }
    }

    @Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
    @Composable
    fun FavoriteCollectionsGridPreview() {
        JetpackComposeTheme {
            FavoriteCollectionsGrid()
        }
    }

    @Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
    @Composable
    fun AlignYourBodyRowPreview() {
        JetpackComposeTheme {
            AlignYourBodyRow()
        }
    }

    @Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
    @Composable
    fun FavoriteCollectionCardPreview() {
        JetpackComposeTheme {
            FavoriteCollectionCard(
                descRes = R.string.fc1_short_mantras,
                contentDrawable = R.drawable.fc1_short_mantras,
                modifier = Modifier
                    .padding(8.dp)
                    .height(56.dp)
            )
        }
    }

    @Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
    @Composable
    fun AlignYourBodyElementPreview() {
        JetpackComposeTheme {
            AlignYourBodyElement(
                titleRes = R.string.ab1_inversions,
                iconDrawable = R.drawable.ab1_inversions,
                modifier = Modifier.padding(8.dp)
            )
        }
    }

    @Preview(showBackground = true, backgroundColor = 0xFFF0EAE2)
    @Composable
    fun SearchBarPreview() {
        JetpackComposeTheme {
            SearchBar(Modifier.padding(12.dp))
        }
    }
}